<template>
  <div style="width: 100%">
    <ElementDialog ref="dialog" embed height="100%" width="60%" :visible="visible" title="标准型号信息">
      <SkeletonPanel>
        <template #left>
          <!--          <ElTree default-expand-all :data="treeData1" :props="default_tree_props" :expand-on-click-node="false" @node-click="handleNodeClick"/>-->
          <ElTabs v-model="activeName" @tab-click="handleClick">
            <ElInput v-model="filterText" placeholder="请输入资产分类名称过滤" />
            <ElTabPane v-if="inType === 'ALL' || inType === 'DEVICE'" label="资产分类" name="DEVICE">
              <ElTree
                ref="tree"
                :data="treeData1"
                class="filter-tree"
                :filter-node-method="filterNode"
                :props="default_tree_props"
                :expand-on-click-node="false"
                @node-click="handleNodeClick" />
            </ElTabPane>
            <ElTabPane v-if="inType === 'ALL' || inType === 'CONSUMABLES'" label="耗材分类" name="CONSUMABLES">
              <ElTree
                :data="treeData2"
                placeholder="输入关键字进行过滤"
                :props="default_tree_props"
                :expand-on-click-node="false"
                @node-click="handleNodeClick" />
            </ElTabPane>
          </ElTabs>
        </template>

        <div style="padding: 6px 10px; text-align: right">
          <ElInput v-model="searchForm.name" placeholder="请输入资产名称" style="width: 200px; margin-right: 10px" />
          <ElButton type="primary" @click="searchChange">搜索</ElButton>
        </div>
        <div style="padding: 4px 10px; color: #2d8cf0; text-align: right; background-color: #ebeef5">
          <span style="cursor: pointer" @click="showDrawer = true">高级搜索</span>
        </div>
        <PageableTable :api="getList" :data="tableData" :multiple="multiple" auto-height @selection-change="change">
          <TableColumn prop="photo" label="照片" :show-overflow-tooltip="false">
            <template #default="scope">
              <Tag v-if="scope.row.photo === ''">暂无</Tag>
              <img
                v-if="scope.row.photo"
                :src="scope.row.photo"
                class="avatar"
                alt=""
                style="width: 120px; height: 80px" />
            </template>
          </TableColumn>
          <TableColumn prop="name" label="资产名称" />
          <TableColumn prop="amount" label="金额" />
          <TableColumn prop="model" label="规格型号" />
          <TableColumn prop="unit" label="计量单位" />
          <TableColumn prop="ctiName" label="资产分类名称" />
          <TableColumn prop="ctiCode" label="资产分类编码" />
        </PageableTable>
      </SkeletonPanel>
      <template #footer>
        <ElButton type="primary" @click="confirm">确定</ElButton>
      </template>
    </ElementDialog>

    <ElDrawer :visible.sync="showDrawer" title="高级搜索" append-to-body>
      <ElForm label-width="120px" label-position="right">
        <ElRow class="form-row">
          <ElCol :span="12">
            <ElFormItem prop="barcode" label="条型码">
              <ElInput v-model="searchForm.barcode" placeholder="请输入条型码" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="model" label="规格型号">
              <ElInput v-model="searchForm.model" placeholder="请输入规格型号" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem prop="amount" label="金额">
              <ElInput v-model="searchForm.amount" placeholder="请输入金额" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="计量单位">
              <ElInput v-model="searchForm.unit" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24" style="text-align: center">
            <ElButton type="primary" @click="searchChange">搜索</ElButton>
            <ElButton>取消</ElButton>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElDrawer>
  </div>
</template>

<script>
  import { fetchSauList } from '@/api/asset/fyassetsau'
  import { fetchCtiTree } from '@/api/asset/fyassetcti'

  export default {
    name: 'AssetSauTable',
    props: {
      visible: Boolean,
      // 单据类型 ALL
      inType: {
        type: String
      },
      multiple: Boolean
    },
    data() {
      return {
        showDrawer: false,
        treeData1: [],
        treeData2: [],
        activeName: 'DEVICE',
        default_tree_props: { label: 'name', value: 'id' },
        type: '',
        filterText: '',
        tableData: [],
        searchForm: {
          barcode: '',
          name: '',
          model: '',
          unit: '',
          amount: ''
        },
        page: { total: 0, page: 1, limit: 25 }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
      this.type = 'DEVICE'
      this.init()
    },
    methods: {
      init() {
        fetchCtiTree({ assetType: 'DEVICE' }).then(response => {
          this.treeData1 = response.data.data
        })
        fetchCtiTree({ assetType: 'CONSUMABLES' }).then(response => {
          this.treeData2 = response.data.data
        })
        this.getList(this.page)
      },
      getList(page, params) {
        params = params || {}
        params.ctiType = this.activeName

        return fetchSauList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        )
          .then(response => {
            this.tableData = response.data.data.records
            this.page.total = response.data.data.total
          })
          .catch(() => {})
      },
      change(rows) {
        this.rows = rows
      },
      confirm() {
        this.$emit('confirm', this.rows)
        this.$refs.dialog.hide()
      },
      handleClick(tab, event) {
        this.getList(this.page)
      },
      handleNodeClick(data) {
        fetchSauList({ current: 1, size: 25, classifiedCode: data.fullCode, assetType: this.inType }).then(response => {
          this.tableData = response.data.data.records
        })
      },
      searchChange() {
        this.getList(this.page)
      },
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      }
    }
  }
</script>
